<!--  -->
<template>
  <div class="position-c">
    <div class="headNav">
      <span @click="close">关闭</span>
      <span>选择城市</span>
    </div>
    <div class="search">
      <van-search
        v-model="value"
        background="#23262d"
        placeholder="输入城市"
        @search="onSearch"
        @input="change"
        left-icon
      />
      <div class="cancel" @click="onCancel">取消</div>
    </div>
    <div v-if="value" class="mask">
      <ul>
        <li v-for="(item, i) in searchCity" :key="i" @click="sClick(i)">
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div v-else>
      <div class="content">
        <div>
          <p>定位城市</p>
          <div class="cityItem">{{ pCity }}</div>
        </div>
        <div>
          <p>历史访问城市</p>
          <ul>
            <li
              class="cityItem"
              v-for="(item, i) in historyCity"
              :key="i"
              @click="hClick(i)"
            >
              {{ item }}
            </li>
          </ul>
        </div>
        <div>
          <p>热门城市</p>
          <ul>
            <li
              class="cityItem"
              v-for="(item, i) in hotCity"
              :key="i"
              @click="onClick(i)"
            >
              {{ item }}
            </li>
          </ul>
        </div>
      </div>

      <van-index-bar
        :sticky="false"
        highlight-color="#fff"
        :index-list="allCity.initial"
      >
        <div v-for="(item, i) in allCity" :key="i">
          <van-index-anchor :index="item.initial" />
          <van-cell
            :border="false"
            v-for="(city, i) in item.list"
            :key="i"
            class="city"
            :title="city.name"
          />
        </div>
      </van-index-bar>
      <!-- 显示地图的容器
      <div id="allmap"></div>-->
    </div>
  </div>
</template>

<script>
import City from "./city.json";
export default {
  data() {
    return {
      value: "",
      historyCity: ["深圳"],
      hotCity: ["上海", "北京", "广州", "杭州", "深圳", "武汉", "成都", "重庆"],
      allCity: City.city,
      pCity: "正在定位",
      searchCity: [],
    };
  },
  mounted() {
    // console.log(this.$store);
    // 1.申请密钥,public/index.html引入script
    // 2.创建地图实例
    // const map = new BMap.Map("allmap");
    //创建点坐标对象
    // const point = new BMap.Point(116.404, 39.915);
    // 初始化地图,设置中心点坐标和地图级别
    // map.centerAndZoom(point, 11);
    //添加地图类型控件
    // map.addControl();
    // map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
    // map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    // 创建地理地位对象
    const geolocation = new BMap.Geolocation();
    //获取当前位置
    geolocation.getCurrentPosition(
      (res) => {
        this.pCity = res.address.city.replace("市", "");
        this.$store.commit(
          "geolocation/getGeolocation",
          res.address.city.replace("市", "")
        );
      },
      (err) => {
        this.pCity = "获取位置失败,请重试";
      },
      {
        //启用高精度
        enableHighAccuracy: true,
      }
    );
  },

  methods: {
    change(v) {
      this.searchCity = [];
      this.allCity.map((item) => {
        item.list.map((ele) => {
          if (ele.name.includes(v)) {
            this.searchCity.push(ele);
          }
        });
      });
    },
    onClick(i) {
      this.historyCity.push(this.hotCity[i]);
      //更改vuex存的定位城市
      this.$store.commit("geolocation/getGeolocation", this.hotCity[i]);
      // 跳转至首页,在vuex中获取定位城市,更改定位信息
      // this.$router.push("/home")
    },
    sClick(i) {
      this.historyCity.push(this.searchCity[i].name);

      this.$store.commit("geolocation/getGeolocation", this.searchCity[i].name);
    },
    hClick(i) {
      this.$store.commit("geolocation/getGeolocation", this.historyCity[i]);
    },
    onSearch(val) {
      //enter后
      // console.log(val);
    },
    onCancel() {
      this.value = "";
    },
    close() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped lang="scss">
.position-c {
  width: 680px;
  margin: 0 auto;
}
.headNav {
  span {
    font-size: 32px;
    margin-left: 20px;
    color: #f7f7f7;
    & ~ span {
      margin-left: 200px;
    }
  }
}
.search {
  width: 100%;
  margin-top: 16px;
  display: flex;
}
.van-search {
  width: 600px;
  caret-color: #fff;
}
.cancel {
  margin-top: 20px;
  margin-left: 5px;
  font-size: 32px;
  color: #f7f7f7;
  opacity: 0.87;
}
.van-search__content {
  height: 60px;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.33);
  border-radius: 26px;
  color: #fff;
  background: #33363d url(~@/assets/images/search/s1.png) no-repeat 32px 18px /28px;
  /deep/.van-field__body {
    margin-top: 10px;
    margin-left: 80px;
    font-size: 28px;
    color: #7a7a7a;
    opacity: 0.67;
    input {
      color: #7a7a7a;
    }
  }
}
.mask {
  width: 400px;
  ul {
    margin-left: 60px;
    li {
      color: #7a7a7a;
      font-size: 32px;
      margin-top: 20px;
    }
  }
}
.content {
  p {
    opacity: 0.56;
    font-size: 24px;
    color: #f7f7f7;
    margin-top: 30px;
  }
  .cityItem {
    width: 180px;
    height: 60px;
    margin-left: 28px;
    background: #33363d;
    font-size: 28px;
    color: #f7f7f7;
    text-align: center;
    line-height: 52px;
    box-sizing: border-box;
    border: 4px solid transparent;
    &:hover {
      border: 4px solid #f9c34a;
      background-color: #22262d;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      margin-top: 20px;
      margin-left: 28px;
      // 选中前3个li
      &:nth-child(-n + 3) {
        margin-top: 12px;
      }
    }
  }
}

.van-index-bar {
  /deep/.van-index-anchor {
    font-size: 28px;
    color: #f7f7f7;
    margin-top: 50px;
  }
  color: #7a7a7a;
  /deep/.van-index-bar__sidebar {
    margin-top: 120px;
    padding: 0 30px;
    span {
      margin-top: 20px;
    }
  }
}
.city {
  font-size: 28px;
  color: #f7f7f7;
  margin-top: 56px;
  background-color: #22262d;
}
</style>
